<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/galleryview.css"/>
    <link rel="stylesheet" type="text/css" href="css/carouselview.css"/>
    <link rel="icon" type="image/png" href="images/ico/bullet-color-ico.png">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="vi">
    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>

    <script src="js/effect.js" type="text/javascript"></script>
    <script src="js/detailCtrl.js" type="text/javascript"></script>

    <link href="" rel="shortcut icon">

    <link rel="stylesheet" type="text/css" href="css/core.css"/>
    <link rel="stylesheet" type="text/css" href="css/header.css"/>
    <link rel="stylesheet" type="text/css" href="css/popup.css"/>
    <link rel="stylesheet" type="text/css" href="css/footer.css">
    <link rel="stylesheet" type="text/css" href="css/listview.css">
    <link rel="stylesheet" type="text/css" href="css/gridview.css">
    <link rel="stylesheet" type="text/css" href="css/menu.css">
    <title>Furniture</title>

</head>
<body>
<div class="main">
    <div class="page">
        <div class="header">
            <div class="nav-logo"></div>
            <ul class="nav-bar">
                <li class="nav-item">About</li>
                <li class="nav-item">Services</li>
                <li class="nav-item">Projects</li>
                <li class="nav-item">Carrer</li>
                <li class="nav-item">Contact</li>
            </ul>
        </div>
        <div class="container">
            <div class="banner"></div>
            <div class="left-menu">
                <div class="title highlight">Nội thất gia đình</div>
                <ul class="menu-list">
                    <li class="menu-item"><div class="menu-item-txt">Bàn ăn</div><i></i></li>
                    <li class="menu-item"><div class="menu-item-txt">Ghế</div><i></i></li>
                    <li class="menu-item"><div class="menu-item-txt">Giường</div><i></i></li>
                    <li class="menu-item"><div class="menu-item-txt">Tủ áo</div><i></i></li>
                    <li class="menu-item"><div class="menu-item-txt">Salon</div><i></i></li>
                    <li class="menu-item"><div class="menu-item-txt">Kệ tivi</div><i></i></li>
                    <li class="menu-item"><div class="menu-item-txt">Tủ ngăn phòng</div><i></i></li>
                    <li class="menu-item"><div class="menu-item-txt">Tủ rượu</div><i></i></li>
                    <li class="menu-item"><div class="menu-item-txt">Tủ đầu giường</div><i></i></li>
                    <li class="menu-item"><div class="menu-item-txt">Tủ đa năng</div><i></i></li>
                    <li class="menu-item"><div class="menu-item-txt">Kệ giày</div><i></i></li>
                    <li class="menu-item"><div class="menu-item-txt">Bàn trang điểm</div><i></i></li>
                    <li class="menu-item"><div class="menu-item-txt">Bàn học</div><i></i></li>
                </ul>
                <div class="title highlight">Nội thất văn phòng</div>
                <ul class="menu-list">
                    <li class="menu-item">Bàn làm việc</li>
                    <li class="menu-item">Bàn lãnh đạo</li>
                    <li class="menu-item">Tủ hồ sơ</li>
                    <li class="menu-item">Bàn họp</li>
                    <li class="menu-item">Bục kệ</li>
                </ul>
                <div class="title highlight">Đồ gỗ ngoài trời</div>
                <ul class="menu-list">
                    <li class="menu-item">Đồ gỗ ngoài trời</li>
                </ul>
                <div class=""></div>
            </div>
            <div class="right-panel">
                <b class="title">Thông số chi tiết</b>

                <div class="detail-panel">
                    <div class="gallery-view">
                        <div class="gallery-preview">
                            <div class="gallery-img" id="gallery-img-src"></div>
                        </div>
                        <ul class="gallery-list">
                            <li class="gallery-item active">
                                <div class="gallery-item-img"></div>
                            </li>
                            <li class="gallery-item">
                                <div class="gallery-item-img"></div>
                            </li>
                            <li class="gallery-item">
                                <div class="gallery-item-img"></div>
                            </li>
                            <li class="gallery-item">
                                <div class="gallery-item-img"></div>
                            </li>
                        </ul>
                        <div class="gallery-btn prev"><i></i></div>
                        <div class="gallery-btn next"><i></i></div>
                    </div>
                    <div class="detail-view">
                        <div class="light-title">Product name</div>
                        <div class="text">Product description
                            Lorem ipsum dolor sit tamet, consectetur adipiscing elit.
                            Quisque vel lobortis neque, nec dictum erat. Proin malesuada,
                            neque at facilisis posuere, tortor arcu vulputate dui, in sodales sem lacus sit amet diam.
                        </div>
                        <div class="detail-cast-btn">1.000.000đ</div>
                    </div>
                </div>
                <br/>
                <b class="title">Sản phẩm liên quan</b>

                <div class="grid-view">
                    <div class="grid-group">
                        <div class="grid-item"><a href="cdetail.html?id=a6">
                            <div class="grid-item-img-wrap">
                                <div class="grid-item-img"
                                     style="background-image: url('images/resource/a6.jpg')"></div>
                            </div>
                            <div class="grid-item-label">
                                Proin malesuada Lorem
                            </div>
                            <div class="grid-item-price">500.000</div>
                        </a>
                        </div>
                        <div class="grid-item"><a href="cdetail.html?id=a7">
                            <div class="grid-item-img-wrap">
                                <div class="grid-item-img"
                                     style="background-image: url('images/resource/a7.jpg')"></div>
                            </div>
                            <div class="grid-item-label">
                                Sit tamet Lorem ipsum dolor
                            </div>
                            <div class="grid-item-price">1.000.000</div>
                        </a>
                        </div>
                        <div class="grid-item"><a href="cdetail.html?id=a8">
                            <div class="grid-item-img-wrap">
                                <div class="grid-item-img"
                                     style="background-image: url('images/resource/a8.jpg')"></div>
                            </div>
                            <div class="grid-item-label">
                                Quisque vel Lorem ipsum dolor sit tamet Quisque
                            </div>
                            <div class="grid-item-price">2.000.000</div>
                        </a>
                        </div>
                        <div class="grid-item"><a href="cdetail.html?id=a9">
                            <div class="grid-item-img-wrap">
                                <div class="grid-item-img"
                                     style="background-image: url('images/resource/a9.jpg')"></div>
                            </div>
                            <div class="grid-item-label">
                                Lobortis neque
                            </div>
                            <div class="grid-item-price">1.050.000</div>
                        </a>
                        </div>
                    </div>
                    <div class="grid-paging">
                        <div class="grid-num grid-prev"></div>
                        <div class="grid-num">1</div>
                        <div class="grid-num active">2</div>
                        <div class="grid-num">3</div>
                        <div class="grid-num">4</div>
                        <div class="grid-num grid-next"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="foot-showroom">
                <div class="carousel-view">
                    <div class="carousel-wrapper">
                        <ul class="carousel-list">
                            <li class="carousel-item">
                                <div class="carousel-item-img"></div>
                                <div class="carousel-item-label">
                                    Lorem ipsum dolor sit tamet
                                    Quisque vel lobortis neque, nec dictum erat. Proin malesuada,
                                </div>
                            </li>
                            <li class="carousel-item">
                                <div class="carousel-item-img"></div>
                                <div class="carousel-item-label">
                                    Sit tamet, consectetur adipiscing elit.
                                    Quisque vel lobortis neque, nec dictum erat. Proin malesuada,
                                </div>
                            </li>
                            <li class="carousel-item">
                                <div class="carousel-item-img"></div>
                                <div class="carousel-item-label">
                                    Consectetur adipiscing elit.
                                    Quisque vel lobortis neque, nec dictum erat. Proin malesuada,
                                </div>
                            </li>
                            <li class="carousel-item">
                                <div class="carousel-item-img"></div>
                                <div class="carousel-item-label">
                                    Lorem ipsum dolor sit tamet dipiscing elit.
                                    Quisque vel lobortis neque, nec dictum erat. Proin malesuada,
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="carousel-btn carousel-prev"><i></i></div>
                    <div class="carousel-btn carousel-next"><i></i></div>
                </div>
            </div>
            <div class="foot-info">
                <div class="foot-left">
                    <div class="foot-logo">Furniture</div>
                    <div class="foot-desc">
                        Lorem ipsum dolor sit tamet, consectetur adipiscing elit.
                        Quisque vel lobortis neque, nec dictum erat. Proin malesuada,
                        neque at facilisis posuere, tortor arcu vulputate dui, in sodales sem lacus sit amet diam.
                    </div>
                </div>
                <div class="foot-right">
                    <div class="foot-contact-name">quick contacts</div>
                    <div class="foot-contact-desc">
                        421.909.123.456<br/>
                        hello@planeto.com
                    </div>
                </div>
            </div>
            <div class="foot-nav">
                <ul class="foot-social">
                    <li class="foot-social-item"><a id="social-facebook"></a></li>
                    <li class="foot-social-item"><a id="social-twitter"></a></li>
                    <li class="foot-social-item"><a id="social-skype"></a></li>
                </ul>
                <div class="foot-copyright">© 2013</div>
                <div class="foot-top">To the top</div>
            </div>
        </div>
    </div>
    <div id="popup" class="popup"></div>
</div>
</body>
</html>